<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/css/style.css' />
    <link rel='stylesheet' href='/css/chat.css' />
  </head>
  <body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">

        <div class="chatbox" id="js_chatbox">
          <div class="tabs">
            <div class="tab-hd">
              <!--
              <a data-id="1" class="active" href="javascript:;">
                  <span class="avatar"><img src="http://placehold.it/32x32/7ecdc5/fff" alt=""/></span>聊天1
                  <i class="close">x</i>
              </a>
              -->
            </div>
            <div class="tab-wrap">
              <!--
              <div class="tab-bd">
                  <div class="hd">
                      <span class="tt">一抹绿</span>
                      <i class="min">-</i>
                      <i class="close js_close">x</i>
                  </div>
                  <div class="bd">
                      <div class="mn">
                          <div class="mnc">
                              <div class="msg-list ">
                                  <ul>

                                      <li class="timeline">2014-11-11   09:56</li>
                                      <li class="ask"><i class="avatar">AK</i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="answer"><i class="avatar"><img src="./Images/head2.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="ask"><i class="avatar"><img src="./Images/head.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="answer"><i class="avatar"><img src="./Images/head2.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="ask"><i class="avatar"><img src="./Images/head.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="answer"><i class="avatar"><img src="./Images/head2.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="ask"><i class="avatar"><img src="./Images/head.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="answer"><i class="avatar"><img src="./Images/head2.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="ask"><i class="avatar"><img src="./Images/head.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="answer"><i class="avatar"><img src="./Images/head2.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="ask"><i class="avatar"><img src="./Images/head.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="answer"><i class="avatar"><img src="./Images/head2.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>

                                  </ul>
                              </div>
                              <div class="bottom">
                                  <form class="form js_form" autocomplete="off">
                                      <div class=" col-md-12 col-sm-12 col-xs-12 insert ">
                                          <i class="icon js_face" title="表情"> </i>
                                          <div class="face">
                                              <div class="arrow"></div>
                                              <div class="face-tt"><a class="close" title="关闭" href="javascript:void(0);"></a></div>
                                              <div class="face-bd">
                                                  <div class="list clearfix">
                                                      <ul></ul>
                                                  </div>
                                              </div>
                                          </div>

                                      </div>
                                      <div class="ipt"><input class="js_ipt" type="text" placeholder="" /></div>
                                      <div class="send"><span>按Enter键发送</span><input class="btn" type="submit" name="button" value="发送"> </div>
                                  </form>
                              </div>
                          </div>
                      </div>
                      <div class="sd">
                          <p class="name">Akylone</p>
                          <p class="sex">男</p>
                          <p class="country">中国</p>
                          <p class="province">安徽</p>
                      </div>
                  </div>
              </div>
              -->
            </div>
          </div>
        </div>

        <div class="chat-msg" id="js_alert">
          <span class="num">0</span>
          <div class="icon"></div>
        </div>

      </div>
    </div>
  </div>

 <script src="/javascripts/jquery-1.11.2.js"></script>
  <script src="/javascripts/plugin/jquery.mousewheel.js"></script>
  <script src="/javascripts/plugin/jquery.rollbar.min.js"></script>
  <script src="/javascripts/util/jquery.emoticons.js"></script>
  <script>
    //ui
    var ui ={};
    ui._single_bd =function(data){
      return ('<div class="tab-bd" style="display: none">' +
      '                <div class="hd">' +
      '                    <span class="tt">'+data.name+'</span>'+
      '                    <i class="close js_close">x</i>' +
      '                </div>' +
      '                <div class="bd">' +
      '                    <div class="mn">' +
      '                        <div class="mnc">' +
      '                            <div class="msg-list js_msg">' +
      '                                <ul></ul>' +
      '                            </div>' +
      '                            <div class="bottom">' +
      '                                <form class="form js_form" autocomplete="off">' +
      '                                    <div class=" col-md-12 col-sm-12 col-xs-12 insert ">' +
      '                                        <i class="icon js_face" title="表情"> </i>' +
      '                                        <div class="face">' +
      '                                            <div class="arrow"></div>' +
      '                                            <div class="face-tt"><a class="close" title="关闭" href="javascript:void(0);"></a></div>' +
      '                                            <div class="face-bd">' +
      '                                                <div class="list clearfix">' +
      '                                                    <ul></ul>' +
      '                                                </div>' +
      '                                            </div>' +
      '                                        </div>' +
      '                                    </div>' +
      '                                    <div class="ipt"><input class="js_ipt" type="text" placeholder="" /></div>' +
      '                                    <div class="send"><span>按Enter键发送</span><input class="btn" type="submit" name="button" value="发送"> </div>' +
      '                                </form>' +
      '                            </div>' +
      '                        </div>' +
      '                    </div>' +
      '                    <div class="sd">' +
      '                        <p class="name">' + data.name + '</p>' +
      '                        <p class="sex">' + data.sex + '</p>' +
      '                        <p class="country">' + data.country + '</p>' +
      '                        <p class="province">' + data.province + '</p>' +
      '                    </div>' +
      '                </div>' +
      '            </div>');
    };
    ui._single_hd =function(data){
      var head = data.head ? '<img src="'+ data.head +'" alt=""/>':formatName(data.name);
      return (' <a data-id="' + data.id + '" href="javascript:;">'+
      '  <span class="avatar">'+
      head+
      '    </span>'+
      '     聊天1'+
      '   <i class="close">x</i>'+
      '  </a>');
    };
    ui.ask = function(data){
      var head;
      if(data.type==17){
        for(var i in data.menberList){
          if(data.toId ==  data.menberList[i].id){
            head = data.menberList[i].head ? '<img src="'+ data.menberList[i].head +'" alt=""/>':formatName(data.menberList[i].name);
            break;
          }
        }
      }else{
        head = data.head ? '<img src="'+ data.head +'" alt=""/>':formatName(data.name);
      }
      return ('<li class="ask">'+
      '    <i class="avatar">'+
      head+
      '    </i>'+
      '    <div class="wrap">'+
      '        <div class="content">ask，回忆不能被ask墙。面对那堵墙ask，我们无能为</div>'+
      '    </div>'+
      '</li>');
    };
    ui.answer = function(data){
      var head = data.head ? '<img src="'+ data.head +'" alt=""/>':formatName(data.name);
      return ('<li class="answer">'+
      '    <i class="avatar">'+
      head+
      '    </i>'+
      '    <div class="wrap">'+
      '        <div class="content">'+data.content+'</div>'+
      '    </div>'+
      '</li>');
    };
    ui._group_hd =function(data){
      var head = data.head ? '<img src="'+ data.head +'" alt=""/>':formatName(data.name);
      return (' <a data-id="' + data.id + '" href="javascript:;">'+
      '  <span class="avatar">'+
      head+
      '    </span>'+
      '     聊天1'+
      '   <i class="close">x</i>'+
      '  </a>');
    };
    ui._group_bd =function(data){
      var head = data.head ? '<img src="'+ data.head +'" alt=""/>':formatName(data.name);
      var frindList = function(){
        var _html ="";
        for(var i in data.menberList){
          var friend_head = data.menberList[i].head ? '<img src="'+ data.menberList[i].head +'" alt=""/>':formatName(data.menberList[i].name);
          _html +='<li><a href="javascript:;" onclick="opt(this)"><span class="avatar">'+ friend_head +'</span>'+data.menberList[i].name+'</a></li>';
        }
        return _html;
      }
      return ('<div class="tab-bd">'+
      '                <div class="hd">'+
      '                    <span class="tt">'+data.name+'</span>'+
      '                    <i class="min">-</i>'+
      '                    <i class="close js_close">x</i>'+
      '                </div>'+
      '                <div class="bd">'+
      '                    <div class="mn">'+
      '                        <div class="mnc">'+
      '                            <div class="msg-list js_msg">'+
      '                                <ul>'+
      '                                </ul>'+
      '                            </div>'+
      '                            <div class="bottom">'+
      '                                <form class="form js_form" autocomplete="off">'+
      '                                    <div class=" col-md-12 col-sm-12 col-xs-12 insert ">'+
      '                                        <i class="icon js_face" title="表情"> </i>'+
      '                                        <div class="face">'+
      '                                            <div class="arrow"></div>'+
      '                                            <div class="face-tt"><a class="close" title="关闭" href="javascript:void(0);"></a></div>'+
      '                                            <div class="face-bd">'+
      '                                                <div class="list clearfix">'+
      '                                                    <ul></ul>'+
      '                                                </div>'+
      '                                            </div>'+
      '                                        </div>'+
      '                                    </div>'+
      '                                    <div class="ipt"><input class="js_ipt" type="text" placeholder="" /></div>'+
      '                                    <div class="send"><span>按Enter键发送</span><input class="btn" type="submit" name="button" value="发送"> </div>'+
      '                                </form>'+
      '                            </div>'+
      '                        </div>'+
      '                    </div>'+
      '                    <div class="sd">'+
      '                        <div class="calendar">'+
      '                            <div class="create">本群创建于</div>'+
      '                            <div class="at">2015/12/12</div>'+
      '                        </div>'+
      '                        <div class="group clearfix">'+
      '                            <div class="total">组成员(6/50)</div>'+
      '                            <ul>'+
      frindList() +
      '                            </ul>'+
      '                        </div>'+
      '                        <a class="add" onclick="addGroup()"><i></i> 邀请好友</a>'+
      '                    </div>'+
      '                </div>'+
      '            </div>');
    };
    ui.opt =function(data) {
      return ('<div class="dropdown">' +
      '    <a href="javascript:;" onclick="privateChat(this)" class="active">发送消息</a>' +
      '    <a href="javascript:;" onclick="removeChat(this)">移除成员</a>' +
      '</div>');
    }
    //聊天
    function chat(my){
      this.oAlert = $("#js_alert");
      this.oChatBox = $("#js_chatbox");
      this.oMsg = this.oAlert.find(".num");
      this.oIcon = this.oAlert.find(".icon");
      this.sendReq= null;//发送请求
      this.my = my;
    };
    chat.prototype = {
      init:function(obj){
        /*
         *表情符
         *下拉框
         * 发送动作
         * @params obj内容区Object
         */
        var global = this;
        var _bd = obj.bd;
        _bd.find(".js_face").faceedit();
        _bd.find(".msg-list").rollbar({zIndex:80,pathPadding:0});
        _bd.find(".js_form").on("submit",function(e){
          e.preventDefault();
          global.sendMsg(obj);
        });
      },
      add:function(data,skip){
        /*
         * 新增聊天窗口 包括新消息新增和点击自增
         * @param data.type是否为群聊
         */var _obj=this.findIndex(data.id);
        this.hideAll();
        if(!skip){
          if(_obj){
            _obj.hd.addClass("active");
            _obj.bd.show();
            return false;
          }
        }
        if(data.type == 17) {
          //群聊
          var _hd = $(ui._group_hd(data));
          var _bd = $(ui._group_bd(data));
        }else{
          var _hd = $(ui._single_hd(data));
          var _bd = $(ui._single_bd(data));
        }
        this.oChatBox.find(".tab-hd").append(_hd);
        this.oChatBox.find(".tab-wrap").append(_bd);
        _hd.addClass("active");
        _bd.show();
        //初始化表情
        this.init({
          hd:_hd,
          bd:_bd
        });
        return {
          hd:_hd,
          bd:_bd
        }
      },
      findIndex : function(idx){
        var global = this;
        var _index;
        global.oChatBox.find(".tab-hd a").each(function(){
          if($(this).attr("data-id")==idx){
            _index = $(this).index();
          }
        });
        if(typeof(_index)!="undefined"){
          return {
            hd:global.oChatBox.find(".tab-hd a").eq(_index),
            bd:global.oChatBox.find(".tab-bd").eq(_index)
          };
        }
      },
      msg:function(data){
        /*
         * 接收消息
         */
        var _obj=this.findIndex(data.id);
        var  _ask =  ui.ask(data);
        if(!_obj){
          _obj = this.add(data,1);
        }
        try{
          this.hideAll();
          _obj.hd.addClass("active");
          _obj.bd.show().find(".msg-list ul").append(_ask);
//                 _obj.bd.find(".msg-list ul").append(_ask);
          this.scrollToBottom(_obj.bd);
        }catch(e){
          console.info (e);
          this.oChatBox.find(".tab-hd a").eq(0).addClass("active");
          this.oChatBox.find(".tab-bd").eq(0).show();
        }
        //计算消息条数
        var _totalMsg = this.oMsg.html();
        _totalMsg++;
        this.oMsg.html(_totalMsg);
        if(_totalMsg>0){
          this.oAlert.removeClass("z-dis");
          this.oIcon.addClass("active");
        }
      },
      sendMsg:function(obj){
        var global = this;
        var _bd = obj.bd;
        var _hd = obj.hd;
        var _str = $.trim(_bd.find(".js_ipt").val());
        var _html = ui.answer({
          id:this.my.myid,
          name:this.my.myName,
          head:this.my.myHead,
          content:faceToHtml(_str)
        });
        if(!_str){
          alert ("请输入聊天内容");
          return false;
        }
        if(this.sendReq == null) {
          global.sendReq = $.ajax({
            url: "/javascripts/data/send.json",
            data: {
              toUser: _hd.attr("data-id"),
              type: _hd.attr("data-type")
            },//拼参数
            dataType: "json",
            method: "get",
            success: function (ret) {
              global.sendReq = null;
              if (ret.successed) {
                _bd.find(".msg-list ul").append(_html);
                _bd.find(".js_ipt").val("");//清空内容
                global.scrollToBottom(_bd);
              }
            },
            error: function () {
              global.sendReq = null;
              alert("发送失败");
            }
          });
        }else{
          alert("您太快了，请先喝杯茶！");
          setTimeout(function(){
            global.sendReq = null;
          },1000);
        }
      },
      scrollToBottom:function(obj){
        var _pH= obj.find(".msg-list").height();
        var _oList= obj.find(".msg-list ul").parent();
        if(_oList.height()>_pH){
          _oList.animate({"top":(_pH-_oList.height())});
        }
      },
      hideAll:function(){
        this.oChatBox.find(".tab-hd a").removeClass("active");
        this.oChatBox.find(".tab-bd").hide();
      },
      showChat:function(){
        var global= this;
        this.oChatBox.fadeIn();
        this.oAlert.hide();
      },
      closeChat: function(){
        this.oChatBox.fadeOut();
        this.oMsg.html(0);
        this.oIcon.removeClass("active");
        this.oAlert.show();

      },
      render:function(){
        var global= this;
        if(global.oChatBox.find(".tab-bd").size()<1){
          global.oAlert.addClass("z-dis");
        }
        //点击查看聊天框
        this.oAlert.on("click",function(){
          if(!(global.oAlert.hasClass("z-dis"))){
            global.showChat();
          }
        });
        //关闭聊天框
        this.oChatBox.on("click",".tab-bd .close",function(){
          if(confirm("确定要关闭所有聊天吗？")){
            global.closeChat();
          }
        });
        //tabs切换
        var index;//点击的索引
        global.oChatBox.on("click",".tab-hd a",function(){
          oTBd =  global.oChatBox.find(".tab-bd");
          var self = $(this),
                  index = self.index();
          self.siblings(".active").removeClass("active");
          self.addClass("active");
          oTBd.hide();
          oTBd.eq(index).show();
        });

        //关闭标签页
        global.oChatBox.on("click",".tab-hd .close",function(e){
          var _idx,
                  oTHd =  global.oChatBox.find(".tab-hd"),
                  oTBd =   global.oChatBox.find(".tab-bd");
          e.stopPropagation();
          var self = $(this),
                  _idx = self.parent().index(),
                  _child = self.parents(".tab-hd").children().size();
          if(_child>1){
            if(oTHd.find("a").eq(_idx).hasClass("active")){
              oTHd.find("a").eq(_idx).remove();
              oTBd.eq(_idx).remove();
              oTHd.find("a").eq(0).addClass("active");
              oTBd.hide();
              global.oChatBox.find(".tab-bd").eq(0).show();
            }else{
              oTHd.find("a").eq(_idx).remove();
              oTBd.eq(_idx).remove();
            }
          }else{
            global.closeChat();
          }
        });

      }
    };


    var chatImpl;

    //ajax取得当前登录者的名字
    startChat();

    function startChat(data){
      //实例化
      chatImpl = new chat({
        myid:"1542",
        myHead:"",
        myName:"重来了"
      });
      chatImpl.render();

      //处理消息
      var test =0;
      var req= null;
      var  getMsg = setInterval(function(){
        if(req==null){
          req = $.ajax({
            url:"/javascripts/data/chat.json",
            data:"",
            dataType:"json",
            methed:"get",
            success:function(ret){
            clearInterval(getMsg);//测试只发二次
              req=null;
              for (var i in ret.dataList){
                chatImpl.msg(ret.dataList[i]);
              }
            },
            error:function(){
              req= null;
              clearInterval(getMsg);
              alert("服务器连接出错");
            }
          });
        }
      },2500);
    }

    //点击聊天
    var addChat = function (obj){
      if(!chatImpl)
        sysalert({
          title:"请稍候",
          content:"聊天正在初始化",
          dueTime:2000,
          layer:true
        });
      var self = $(obj);
      chatImpl.add({
        id:self.attr("data-id"),
        name:self.attr("data-name"),
        head:""
      });
      chatImpl.showChat();
    }

    //操作组员
    function opt(obj){
      var obj = $(obj);
      var _html = $(ui.opt());
      obj.parent().append(_html);

      //outclick事件
      _html.on("outerClick",function(){
        _html.remove();
      });
    }
  </script>
  </body>
</html>
